<template>
	<view class="ball-team-reg-page">
		<view style="padding: 0 10px;margin-top: 10px;">
			<view class="form-sty">
				<text class="input-title ">球队Logo</text>
				<uni-file-picker class="img-sty" :auto-upload="false" limit="1" mode="grid" :disablePreview="false" 
					v-model="logo" file-mediatype="image" :sizeType="sizeType" ref="logo" @fail="imgFail"
					@progress="imgProgress"   @delete="(e) => {delImg(e, 'logo')}"
					@select="(e)=>{imgSelect(e,'logo')}" @success="(e)=> {imgSuccess(e,'logo')}">
				</uni-file-picker>
			</view>
			<view class="form-sty" style="margin-top: 10px;">
				<text class="input-title">企事业单位主体</text>
				<!-- <img class="img-sty" :src="ballTeamPhoto[0].url" alt="" v-if="btnFla"> -->
				<uni-file-picker class="img-sty" :auto-upload="false" limit="1" mode="grid"
					:disablePreview="false" file-mediatype="image" :sizeType="sizeType" @fail="imgFail"
					@progress="imgProgress" ref="companyImg" v-model="companyImg" @delete="(e) => {delImg(e, 'companyImg')}"
					@select="(e)=>{imgSelect(e,'companyImg')}" @success="(e)=> {imgSuccess(e,'companyImg')}">
				</uni-file-picker>
			</view>
			<view class="form-sty" style="margin-top: 10px;">
				<text class="input-title">球队合影</text>
				<!-- <img class="img-sty" :src="ballTeamPhoto[0].url" alt="" v-if="btnFla"> -->
				<uni-file-picker class="img-sty" :auto-upload="false" limit="1" mode="grid"
					:disablePreview="false" file-mediatype="image" :sizeType="sizeType" @fail="imgFail"
					@progress="imgProgress" ref="ballTeamPhoto" v-model="ballTeamPhoto" @delete="(e) => {delImg(e, 'ballTeamPhoto')}"
					@select="(e)=>{imgSelect(e,'ballTeamPhoto')}" @success="(e)=> {imgSuccess(e,'ballTeamPhoto')}">
				</uni-file-picker>
			</view>
			<view class="form-text-area">
				<text class="input-title">球队简介</text>
				<textarea class="text-area-sty" style="width: 100%;" :disabled="btnFla" :maxlength="100"
					v-model="formData.ballTeamIntroduce" placeholder="请输入" />
			</view>
			<view style="width: 100%;margin-top: 50px;padding-bottom: 50px;text-align: center;">
				<view class="btn-area" @click="confirmBtn" v-if="!btnFla">
					<button class="btn-sty" :disabled="btnFla"
						style="background: #fc993b;color: #fff;width: 150px;height: 38px;border-radius: 20px;">确认</button>
					<!-- <view class="btn-sty" style="background: #fc993b;color:#fff;" >确认</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getImageList,
		cheackUser
	} from '@/utils/baseFn.js';
	const db = uniCloud.database();
	const dbCmd = db.command;
	export default {
		data() {
			return {
				formData: {
					ballTeamIntroduce: '',
					ballTeamPhoto: '',
					companyImg: '',
					logo: ''
				},
				userInfo: {},
				ballTeamPhoto: [],
				companyImg: [],
				logo: [],
				sizeType: ['original', 'compressed'],
				ballTeamId: null,
				typ: null,
				btnFla: false
			}
		},
		onLoad(op) {
			const _this = this
			if (op.id) {
				this.getBallTeamInfo(op.id)
			}
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					console.log(res.data)
					if (res.data) {
						_this.userInfo = res.data
					}
				}
			})
			// if (op && op.id) {
			// 	this.ballTeamId = op.id
			// 	this.getPlayersList(op.id)
			// }
		},
		created() {},
		mounted() {},
		methods: {
			getBallTeamInfo(id) {
				const _this = this
				db.collection('team-MGMT').doc(id).field(
					"ballTeamIntroduce,ballTeamPhoto,state,companyImg,logo"
				).get().then((res) => {_this
					const data = res.result.data[0]
					if (data) {
						this.formData = data
						if (this.formData.ballTeamPhoto) {
							this['ballTeamPhoto'] = getImageList(this.formData.ballTeamPhoto,
								this.$baseImgUrl)
						}
						if (this.formData.companyImg) {
							this['companyImg'] = getImageList(this.formData.companyImg, this
								.$baseImgUrl)
						}
						if (this.formData.logo) {
							this['logo'] = getImageList(this.formData.logo, this
								.$baseImgUrl)
						}
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 手动上传
			upload(f) {
				// 插件上传
				this.$refs[f].upload()
			},
			// 获取上传状态
			imgSelect(e, f, index = 0) {
				console.log('选择文件：', e)
				e.tempFiles.map(item => {
					if (`jpg,jpeg,png`.indexOf(item.extname) > -1) {
						if (item.size > 522183) {
							this.compress(item, index,f);
						} else {
							this.upload(f)
						}
					} else {
						this.upload(f)
					}
				})

			},
			// 删除附件
			delImg(e,f) {
				const _this = this
				uni.showModal({
					title: `删除图片？`,
					content: "删除后该图片将无法在页面展示，请谨慎删除！",
					success: async (res) => {
						if (!res.confirm) return false
						const annexFn = uniCloud.importObject('annex-del-fn')
						await annexFn.delFileFn([e.tempFile.fileID])
						_this.formData[f] = ''
					},
					fail: () => {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					}
				})
			},
			// 获取上传进度
			imgProgress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			imgSuccess(e,f) {
				const url = e.tempFilePaths[0].split('/')
				this.formData[f] = `${url[url.length - 1]},${e.tempFiles[0].name}`
				console.log('上传成功', e, this.formData[f])
			},
			// 上传失败
			imgFail(e) {
				console.log('上传失败：', e)
			},
			compress(r, index,f) { // 图片压缩
				var that = this;
				const num = r.size > 2251836 ? 3 : r.size < 1225836 ? 34 : 8
				console.log(r.size, '>522183原图大小', num, '压缩比例');
				if (r.size) {
					wx.compressImage({
						src: r.path,
						quality: num, // 0-100,越高却清晰
						success(res) {
							that.SizeImg(r, res, index, num,f);
						}
					})
				}
			},
			SizeImg(r, res, n, num,f) { // 查询图片大小
				let that = this;
				const arr = []
				wx.getFileInfo({ //查询压缩后的图片大小
					filePath: res.tempFilePath,
					success(ys) {
						let h = that.$refs[f].filesList[n].image.height * ((100 - num) / 100)
						let w = that.$refs[f].filesList[n].image.width * ((100 - num) / 100)
						console.log('压缩后的文件大小：' + ys.size);
						console.log('压缩后的临时路径：' + res.tempFilePath);
						that.$refs[f].filesList[n].path = res.tempFilePath
						that.$refs[f].filesList[n].size = ys.size
						that.$refs[f].filesList[n].url = res.tempFilePath
						that.$refs[f].filesList[n].image = {
							height: h,
							location: res.tempFilePath,
							width: w
						}
						that.$refs[f].filesList[n].width = w
						that.$refs[f].filesList[n].height = h
						that.$refs[f].filesList[n].location = res.tempFilePath
						that.upload(f)
					}
				})
			},
			confirmBtn() {
				console.log(this.imgList)
				const id = this.formData._id
				const parm = this.formData
				parm.updated_date = new Date().getTime()
				parm.created_by = this.userInfo.userNm
				delete parm._id
				delete parm.state
				this.btnFla = true
				uni.showLoading({
					mask: true
				});
				return db.collection('team-MGMT').doc(id).update(parm).then((res) => {
					uni.showToast({
						title: '修改成功'
					})
					this.btnFla = false
					setTimeout(() => uni.navigateBack({
						delta: 1
					}), 1228)
					uni.hideLoading();
				}).catch((err) => {
					this.btnFla = false
					uni.hideLoading();
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {

		},
		/**
		 * 用户点击右上角分享好友
		 */
		onShareAppMessage: function() {
			// const obj = {
			// 	id: this.ballTeamId,
			// 	nm: this.formData.teamName,
			// 	typ: this.formData.type,
			// 	rpbNm: this.formData.responsibleName
			// }
			// return {
			// 	path: `pages/sp-obj/register/playRegister?parm=${JSON.stringify(obj)}`,
			// 	title: `${obj.nm}球员注册`,
			// }
		},
		/**
		 * 用户点击右上角分享朋友圈
		 */
		onShareTimeline: function() {
			// const obj = {
			// 	id: this.ballTeamId,
			// 	nm: this.formData.teamName,
			// 	typ: this.formData.type,
			// 	rpbNm: this.formData.responsibleName
			// }
			// return {
			// 	path: 'pages/sp-obj/register/playRegister',
			// 	query: `parm=${JSON.stringify(obj)}`,
			// 	title: `${obj.nm}球员注册`
			// }
		}
	}
</script>

<style>
	.ball-team-reg-page {
		height: 100vh;
	}

	.form-sty .uni-file-picker {
		display: inline-block;
		width: 50%;
	}

	.ball-play-info {
		padding: 12px 0;
		border-bottom: 1px solid #ccc;
	}

	.ball-play-info view {
		width: 50%;
		display: inline-block;
	}

	.input-title {
		width: 230rpx;
		display: inline-block;
		vertical-align: top;
	}

	.img-sty {
		width: 60%;
		height: 68px;
		display: inline-block;
	}

	.input-sty {
		width: 65%;
		display: inline-block;
		vertical-align: middle;
	}

	.form-sty {
		width: 100%;
		height: 70px;
		border-bottom: 1px solid #dcdfe6;
		line-height: 70px;
		padding: 0 5px;
	}

	.btn-area {
		width: 50%;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
	}

	.btn-sty {
		width: 150px;
		height: 38px;
		color: #fc993b;
		background: #ffffff;
		border: 1px solid #fc993b;
		border-radius: 20px;
		line-height: 38px;
		margin: 0 auto;
	}

	.form-text-area {
		padding: 0 5px;
		margin-top: 20px;
		border-bottom: none;
	}

	.text-area-sty {
		width: 100%;
		height: 120px;
		margin-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #ccc;
	}

	.bi-shu-sty::before {
		content: '*';
		position: relative;
		top: 0;
		left: 0;
		color: red;
	}
</style>
<style lang="scss">
</style>